<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 2. 定义根标签 -->
    <div id="root"></div>
    <!-- 1. 引入react的文件-->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>
    <!-- type="text/babel"的作用:让babel编译当前script标签中的代码 -->
    <script type="text/babel">
      // 3.根据需求创建虚拟dom
      const obj = {
        name: 'zs',
        flag: false,
      }
      // 在jsx中通过{}插值表达式,来动态的插入数据
      // 1. 插值表达式在jsx中,可以写在哪些位置
      // 1.1 可以写在标签的属性的值的位置. 肯定是为了控制属性
      // 1.2. 可以写在标签的子节点位置. 肯定是为了渲染这个数据
      // 2. 插值表达式中可以写什么
      // 可以写任何的js表达式
      // 什么是表达式: 一段js运行完毕之后,会得到一个结果
      // 特殊情况:
      // 1. 不要直接渲染布尔值,null,undefined, 不报错,不警告,不渲染
      // 2. 不要直接渲染普通对象. 会报错
      // 3. 渲染数组,会把数组的每一个子元素当做一个子节点去渲染
      // 4. 插值表达式中可以渲染虚拟dom(标签)

      // 变量
      // 常量
      // 字面量
      // 函数
      // 函数调用
      // 运算

      // const a = 1 声明语句,不是表达式
      // if,swich 分支语句,不是表达式
      // for,while.. 循环语句,不是表达式

      const a = 2
      function fn() {
        return 1
      }
      const div = (
        <div>
          <div>{obj.name}</div>
          <button disabled={obj.flag}>按钮</button>
          <div>{a}</div>

          {/*注意: 不要直接渲染布尔值,null和undefined.页面上什么都不会出现*/}
          <div>{false}</div>
          <div>{undefined}</div>
          <div>{null}</div>
          {/*NaN可以渲染,但是没必要*/}
          {/*<div>{NaN}</div>*/}
          <div>{'abc'}</div>
          {/*如果渲染的是组件,则会把数组中的每一个元素,当做一个子节点去渲染*/}
          <div>{['a', 'b', 'c']}</div>
          {/*普通对象不能直接渲染,会报错*/}
          {/*<div>{{ name: 'zs' }}</div>*/}
          {/*函数不能直接渲染,会警告*/}
          {/*<div>{function () {}}</div>*/}
          {/* 下面的这个是声明语句,不是表达式*/}
          {/* <div>{const fn = () => {}}</div>*/}
          <div>{fn()}</div>
          {/*插值表达式中也可以直接渲染虚拟dom*/}
          <div>{false ? 123 : <h1>678</h1>}</div>
        </div>
      )

      /*
      <div>
          <div>zs</div>
      </div>

      */

      // 4. 根据虚拟dom创建真实dom并渲染
      ReactDOM.createRoot(document.getElementById('root')).render(div)
    </script>
  </body>
</html>
